<template>
  <div class="game-details-container">
    <!-- Skeleton Loading -->
    <template v-if="loading">
      <div class="game-detail-card" v-for="n in 5" :key="'skeleton-'+n">
        <el-skeleton :rows="0" animated>
          <template #template>
            <div class="skeleton-content">
              <el-skeleton-item variant="image" style="width: 30%; height: 200px;" />
              <div style="width: 70%; padding: 20px;">
                <el-skeleton-item variant="h3" style="width: 50%;" />
                <el-skeleton-item variant="text" style="width: 30%; margin-top: 15px;" />
                <div style="display: flex; gap: 10px; margin-top: 15px;">
                  <el-skeleton-item variant="button" style="width: 80px;" />
                  <el-skeleton-item variant="button" style="width: 80px;" />
                  <el-skeleton-item variant="button" style="width: 80px;" />
                </div>
                <el-skeleton-item variant="text" style="margin-top: 15px;" />
                <el-skeleton-item variant="text" style="width: 80%; margin-top: 5px;" />
                <el-skeleton-item variant="text" style="width: 60%; margin-top: 5px;" />
              </div>
            </div>
          </template>
        </el-skeleton>
      </div>
    </template>

    <!-- Actual Content -->
    <template v-else>
      <div class="game-detail-card" v-for="(game, index) in games" :key="index">
        <div class="video-content">
          <div class="video-placeholder">
            <img :src="game.img_url" alt="">
          </div>
        </div>
        <div class="detail-content">
          <div class="game-header">
            <h3 class="game-title">{{ game.name }}</h3>
            <div class="game-rating">{{ game.rating }}</div>
          </div>

          <div class="download-buttons">
            <button class="download-btn ios">AppStore下载</button>
            <button class="download-btn android">安卓下载</button>
            <button class="download-btn pc">下载PC版</button>
          </div>

          <div class="game-description">
            <p class="intro-title">简介：</p>
            <p class="intro-text">{{ game.description }}</p>
          </div>

          <div class="game-notice">
            <p>公告：{{ game.notice }}</p>
          </div>
        </div>
      </div>
    </template>

    <!-- Scroll to Top Rocket -->
   <el-backtop
      target=".game-details-container"
      :visibility-height="200"
      class="rocket-backtop"
    >
      <div class="rocket-icon">
        <el-icon :size="20"><ArrowUpBold /></el-icon>
      </div>
    </el-backtop>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ArrowUpBold } from '@element-plus/icons-vue'
import img1 from '@/assets/imgs/game_center/img1.png'
import img2 from '@/assets/imgs/game_center/img2.png'
import img3 from '@/assets/imgs/game_center/img3.png'
import img4 from '@/assets/imgs/game_center/img4.png'
import img5 from '@/assets/imgs/game_center/img5.png'

const loading = ref(true)
const games = ref([
  {
    img_url: img1,
    name: '三国：谋定天下',
    rating: '+9.2 策略',
    description: '>>真实大大小小，改变的桌面支持端 > 旗舰品质、操作高效、口碑爆棚 > >新用户5个新赛季，下载7天内就达125抽和品质双模特（三国：谋逆天下）是...',
    notice: '首款多职业战争策略手游'
  },
  {
    img_url: img2,
    name: '游戏2名称',
    rating: '+8.5 类型',
    description: '游戏2的简介内容...',
    notice: '游戏2的公告信息'
  },
  {
    img_url: img3,
    name: '游戏3名称',
    rating: '+7.8 类型',
    description: '游戏3的简介内容...',
    notice: '游戏3的公告信息'
  },
  {
    img_url: img4,
    name: '游戏4名称',
    rating: '+7.8 类型',
    description: '游戏4的简介内容...',
    notice: '游戏4的公告信息'
  },
  {
    img_url: img5,
    name: '游戏5名称',
    rating: '+7.8 类型',
    description: '游戏5的简介内容...',
    notice: '游戏5的公告信息'
  },
  {
    img_url: img1,
    name: '三国：谋定天下',
    rating: '+9.2 策略',
    description: '>>真实大大小小，改变的桌面支持端 > 旗舰品质、操作高效、口碑爆棚 > >新用户5个新赛季，下载7天内就达125抽和品质双模特（三国：谋逆天下）是...',
    notice: '首款多职业战争策略手游'
  },
  {
    img_url: img2,
    name: '游戏2名称',
    rating: '+8.5 类型',
    description: '游戏2的简介内容...',
    notice: '游戏2的公告信息'
  },
  {
    img_url: img3,
    name: '游戏3名称',
    rating: '+7.8 类型',
    description: '游戏3的简介内容...',
    notice: '游戏3的公告信息'
  },
  {
    img_url: img4,
    name: '游戏4名称',
    rating: '+7.8 类型',
    description: '游戏4的简介内容...',
    notice: '游戏4的公告信息'
  },
  {
    img_url: img5,
    name: '游戏5名称',
    rating: '+7.8 类型',
    description: '游戏5的简介内容...',
    notice: '游戏5的公告信息'
  }
])
const containerRef = ref(null)

// 确保在挂载后容器高度足够
onMounted(() => {
  if(containerRef.value) {
    containerRef.value.style.minHeight = '100vh'
  }
})
// Simulate loading delay
onMounted(() => {
  setTimeout(() => {
    loading.value = false
  }, 3000)
})
</script>

<style scoped lang="scss">
.game-details-container {
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  position: relative;
  min-height: 100vh;

  .game-detail-card {
    display: flex;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;

    .video-content {
      flex: 3;
      background: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

    }

    .detail-content {
      flex: 7;
      padding: 20px;
      display: flex;
      flex-direction: column;

      .game-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;

        .game-title {
          font-size: 18px;
          font-weight: 600;
          color: #333;
          margin: 0;
        }

        .game-rating {
          color: #ff6600;
          font-weight: bold;
        }
      }

      .download-buttons {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;

        .download-btn {
          padding: 6px 12px;
          border: none;
          border-radius: 4px;
          font-size: 12px;
          cursor: pointer;
          transition: all 0.2s;

          &.ios {
            background: #007aff;
            color: white;

            &:hover {
              background: #0062cc;
            }
          }

          &.android {
            background: #3ddc84;
            color: white;

            &:hover {
              background: #2ec977;
            }
          }

          &.pc {
            background: #f0f0f0;
            color: #333;

            &:hover {
              background: #e0e0e0;
            }
          }
        }
      }

      .game-description {
        margin-bottom: 15px;

        .intro-title {
          font-weight: bold;
          color: #333;
          margin: 0 0 5px 0;
          font-size: 14px;
        }

        .intro-text {
          color: #666;
          font-size: 13px;
          line-height: 1.5;
          margin: 0;
        }
      }

      .game-notice {
        padding: 8px;
        background: #fff8e6;
        border-radius: 4px;

        p {
          color: #ff6600;
          font-size: 12px;
          margin: 0;
        }
      }
    }
  }

  .skeleton-content {
    display: flex;
    width: 100%;
  }
}

.rocket-backtop {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #ff6600;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(255, 102, 0, 0.3);
  transition: all 0.3s;

  &:hover {
    background-color: #ff8533;
    transform: translateY(-3px);
  }

  .rocket-icon {
    animation: float 2s infinite ease-in-out;
  }

  @keyframes float {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }
}
</style>
